<template>
	<view>
		<view class="content jui_bg_fff">
			<view class="row">
				<view class="nominal jui_fc_333 jui_fs30">
					收货人
				</view>
				<view class="input">
					<input placeholder="请输入收货人姓名" type="text" v-model="info.recipient" style="width: 95%;" class="" />
				</view>
			</view>
			<view class="row">
				<view class="nominal jui_fs30">
					电话号码
				</view>
				<view class="input">
					<input placeholder="请输入收货人手机号" type="text" v-model="info.recipientPhone" style="width: 95%;"
						class="" />
				</view>
			</view>
			<view class="row jui_flex jui_flex_items_center">
				<view class="nominal jui_fs30">
					所在地区
				</view>
				<!-- <view class="input jui_fs30 " @tap="chooseCity">
					{{region.label}}
				</view> -->
				<input class="" disabled type="text" placeholder="点击选择所在地区" v-model="region.label" @tap="chooseCity"
					style="color: grey;" />
			</view>
			<view class="row">
				<view class="nominal jui_fs30">
					详细地址
				</view>
				<view class="input">
					<textarea placeholder="请输入详细地址，如街道、门派号等" type="text" auto-height v-model="info.address"
						style="width: 95%;" class="jui_fs30" /></textarea>
				</view>
			</view>


			<!-- <view class="row">
				<view class="nominal jui_fs30">
					设置默认地址
				</view>
				<view class="input switch">
					<switch style="transform:scale(0.8)" :checked="isDefault" @change="isDefaultChange" />
				</view>
			</view> -->
		</view>
		<view class="">
			<div id="map"></div>
		</view>
		<view class="save" @tap="commitData">
			<view class="btn">
				保存地址
			</view>
		</view>

		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValue"
			@onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		<view v-if="modalShow">
			<modalConfirm tips="确认删除？" @modalCancle="modalShow = false" @modalConfirm="modalConfirm">
			</modalConfirm>
		</view>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'

	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				editType: 'edit',
				id: '',
				isDefault: false,
				cityPickerValue: [0, 0, 1],
				themeColor: '#318BF2',
				region: {
					label: "请点击选择地址",
					value: [],
					cityCode: ""
				},
				info: {
					address: "",
					default: 2
				},
				modalShow: false
			};
		},
		onLoad(opt) {
			console.log(opt)
			this.id = opt.id;
			console.log('this.id', this.id)
			this.editType = opt.editType;
			this.editType == "edit" && this.init();
		},
		onNavigationBarButtonTap() {
			if (this.editType == "edit") {
				this.modalShow = true;
			}
		},
		methods: {
			init() {
				let userId = uni.getStorageSync('uid');
				let _token = uni.getStorageSync('token');
				let id = this.id
				console.log('userId', userId)
				let params = {
					userId: userId,
					_token: _token,
					addressId: id
				}
				this.$api.getSiteFind(params).then(res => {
					if (res.ok) {
						this.info = res.data;
						this.region.label = this.info.district;
						this.isDefault = this.info.default == "2" ? true : false;
					}
				});
			},
			modalConfirm() {
				let userId = uni.getStorageSync('uid');
				let _token = uni.getStorageSync('token');
				let id = this.id
				console.log('userId', userId)
				let params = {
					userId: userId,
					_token: _token,
					addressId: id
				}
				this.$api.delSite(params).then(res => {
					if (res.ok) {
						this.$msg(res.msg);
						this.modalShow = false;
						setTimeout(() => {
							uni.navigateBack({

							})
						}, 1500)
					}
				});
			},
			commitData() {
				let userId = uni.getStorageSync('uid');
				let _token = uni.getStorageSync('token');
				this.info.userId = userId
				this.info._token = _token
				if (!this.info.recipient) {
					this.$msg('请输入收货人姓名');
					return;
				}
				if (!this.info.recipientPhone) {
					this.$msg('请输入收货人手机号');
					return;
				}
				if (!(/^1[3456789]\d{9}$/.test(this.info.recipientPhone))) {
					this.$msg('请输入正确的手机号');
					return;
				}
				// if (!(/^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/.test(this.info.code_id))) {
				// 	this.$msg('请输入正确的身份证号');
				// 	return;
				// }
				if (!this.info.district) {
					this.$msg('请选择收货地址');
					return;
				}
				if (!this.info.address) {
					this.$msg('请输入详细收货地址');
					return;
				}
				console.log(this.editType)
				if (this.editType == 'add') {
					this.$api.addSite(this.info).then(res => {
						if (res.ok) {
							this.$msg(res.msg);
							setTimeout(() => {
								uni.navigateBack({

								})
							}, 1500)
						}
					});
				} else {
					this.info.createTime = new Date()
					this.info.updateTime = new Date()
					this.$api.setSite(this.info).then(res => {
						if (res.ok) {
							this.$msg(res.msg);
							setTimeout(() => {
								uni.navigateBack({

								})
							}, 1500)
						}
					});
				}
			},
			onCancel(e) {
				console.log(e)
			},
			chooseCity() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				console.log(e)
				this.cityPickerValue = e.value;
				this.region.label = e.label.replace(/-/g, "");
				// this.info.district = e.label.replace(/-/g, "");
				this.info.district = e.label;

			},
			isDefaultChange(e) {
				console.log(e.detail.value)
				this.isDefault = e.detail.value;
				this.info.default = this.isDefault ? 2 : 1
			},
			del() {
				let data = {
					id: this.id
				}
				this.$api.getAddressDelete(data).then(res => {
					this.$msg(res.msg)
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				})
			},
		},


	};
</script>
<style lang="scss">
	.save {
		view {
			display: flex;
		}

		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120upx;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn {
			box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
			width: 90%;
			height: 80upx;
			border-radius: 80upx;
			background-color: $zhuse;
			color: #fff;
			justify-content: center;
			align-items: center;

			.icon {
				height: 80upx;
				color: #fff;
				font-size: 30upx;
				justify-content: center;
				align-items: center;
			}

			font-size: 30upx;
		}
	}

	.content {
		display: flex;
		flex-wrap: wrap;

		view {
			display: flex;
		}

		.row {
			width: 94%;

			margin: 0 3%;
			border-bottom: solid 1upx #f6f6f6;

			.nominal {
				width: 30%;
				height: 90upx;
				font-weight: 200;
				font-size: 28upx;
				align-items: center;
				color: #333;
			}

			.input {
				width: 70%;
				padding: 20upx 0;
				align-items: center;
				font-size: 28upx;

				&.switch {
					justify-content: flex-end;
				}

				.textarea {
					margin: 20upx 0;
					min-height: 120upx;
				}
			}

			.del {
				width: 100%;
				height: 100upx;
				justify-content: center;
				align-items: center;
				font-size: 36upx;
				// color: $theme-color;
				background-color: #d9f3e1;
				border-bottom: solid 1upx #eee;
			}
		}
	}
</style>
